<template>
  <!--分页组件-->
  <div class="pageComponent" v-if="pageConfig.total">
    <!--上一页-->
    <button @click="prePage" :disabled="pageConfig.pageNo === 1">上一页</button>
    <!--总页数小于8的-->
    <template v-if="pageTotal <= showPageNo">
      <button
        v-for="i in pageTotal"
        @click="changeCurrentPage(i)"
        :class="{ active: i === pageConfig.pageNo }"
        :key="i"
      >
        {{ i }}
      </button>
    </template>
    <template v-else-if="pageConfig.pageNo < 4">
      <button
        v-for="i in 6"
        @click="changeCurrentPage(i)"
        :class="{ active: i === pageConfig.pageNo }"
        :key="i"
      >
        {{ i }}
      </button>
      <button :disabled="true">···</button>
      <button @click="changeCurrentPage(pageTotal)">{{ pageTotal }}</button>
    </template>
    <template v-else-if="pageConfig.pageNo > pageTotal - 4">
      <button @click="changeCurrentPage(1)">1</button>
      <button :disabled="true">···</button>
      <button
        v-for="i in 6"
        @click="changeCurrentPage(i + (pageTotal - 6))"
        :class="{ active: i + (pageTotal - 6) === pageConfig.pageNo }"
        :key="i"
      >
        {{ i + (pageTotal - 6) }}
      </button>
    </template>
    <template v-else>
      <button @click="changeCurrentPage(1)">1</button>
      <button :disabled="true">···</button>
      <button @click="changeCurrentPage(pageConfig.pageNo - 2)">{{ pageConfig.pageNo - 2 }}</button>
      <button @click="changeCurrentPage(pageConfig.pageNo - 1)">{{ pageConfig.pageNo - 1 }}</button>
      <button class="active">{{ pageConfig.pageNo }}</button>
      <button @click="changeCurrentPage(pageConfig.pageNo + 1)">{{ pageConfig.pageNo + 1 }}</button>
      <button @click="changeCurrentPage(pageConfig.pageNo + 2)">{{ pageConfig.pageNo + 2 }}</button>
      <button :disabled="true">···</button>
      <button @click="changeCurrentPage(pageTotal)">{{ pageTotal }}</button>
    </template>
    <!--下一页-->
    <button @click="nextPage" :disabled="pageConfig.pageNo === pageTotal">下一页</button>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, reactive, toRefs } from 'vue'

interface pageConfig {
  pageSize: number
  pageNo: number
  total: number
  pageTotal: number
}

export default defineComponent({
  name: 'PageLimit',
  props: {
    // 分页配置
    pageConfig: {
      type: Object as PropType<pageConfig>,
      require: true,
      default() {
        return {
          pageSize: 10, // 一页的数据条数
          pageNo: 0, // 当前页的索引
          total: 0, // 总的数据条数
          pageTotal: 0 // 总页数
        }
      }
    }
  },
  emits: ['changeCurrentPage'],
  setup(props, { emit }) {
    const data = reactive({
      showPageNo: 10
    })
    const methods = {
      prePage() {
        ;(props as any).pageConfig.pageNo -= 1
        emit('changeCurrentPage', (props as any).pageConfig.pageNo)
      },
      nextPage() {
        ;(props as any).pageConfig.pageNo += 1
        emit('changeCurrentPage', (props as any).pageConfig.pageNo)
      },
      changeCurrentPage(i: number) {
        ;(props as any).pageConfig.pageNo = i
        emit('changeCurrentPage', (props as any).pageConfig.pageNo)
      }
    }
    // 计算总页数，如果传了pageTotal,直接取pageTotal的值，如果传了total，那么根据pageSize去计算
    const pageTotal = computed(() => {
      const config = (props as any).pageConfig
      if (config.pageTotal) {
        return config.pageTotal
      } else {
        if (config.pageSize && config.total) {
          return Math.ceil(config.total / config.pageSize)
        } else {
          return 0
        }
      }
    })
    return {
      ...toRefs(data),
      ...toRefs(props),
      ...methods,
      pageTotal
    }
  }
})
</script>

<style lang="stylus" scoped>
button
  margin  0 .5rem
  background-color  #f4f4f5
  outline none
  border-radius  .2rem
  padding  0 .2rem
  vertical-align  top
  display  inline-block
  font-size  1.4rem
  min-width  3.55rem
  height  3rem
  line-height  3rem
  cursor  pointer
  box-sizing  border-box
  text-align  center
  border  0

.active
  cursor  not-allowed
  background-color  #409eff
  color  #fff

[disabled]
  color  #c0c4cc
  cursor  not-allowed
</style>
